Using custom elements

#Using custom elements| 来源: 网络整理| 查看: 265

You can define several different callbacks inside a custom element's class definition, which fire at different points in the element's lifecycle:

connectedCallback: Invoked each time the custom element is appended into a document-connected element. This will happen each time the node is moved, and may happen before the element's contents have been fully parsed.

Note: connectedCallback may be called once your element is no longer connected, use Node.isConnected to make sure.

disconnectedCallback: Invoked each time the custom element is disconnected from the document's DOM. adoptedCallback: Invoked each time the custom element is moved to a new document. attributeChangedCallback: Invoked each time one of the custom element's attributes is added, removed, or changed. Which attributes to notice change for is specified in a static get observedAttributes method

Let's look at an example of these in use. The code below is taken from the life-cycle-callbacks example (see it running live). This is a trivial example that generates a colored square of a fixed size on the page. The custom element looks like this:

The class constructor is really simple — here we attach a shadow DOM to the element, then attach empty and elements to the shadow root:

const shadow = this.attachShadow({ mode: "open" }); const div = document.createElement("div"); const style = document.createElement("style"); shadow.appendChild(style); shadow.appendChild(div);

The key function in this example is updateStyle() — this takes an element, gets its shadow root, finds its element, and adds width, height, and background-color to the style.

The actual updates are all handled by the life cycle callbacks, which are placed inside the class definition as methods. The connectedCallback() runs each time the element is added to the DOM — here we run the updateStyle() function to make sure the square is styled as defined in its attributes:

connectedCallback() { console.log('Custom square element added to page.'); updateStyle(this); }

The disconnectedCallback() and adoptedCallback() callbacks log simple messages to the console to inform us when the element is either removed from the DOM, or moved to a different page:

disconnectedCallback() { console.log('Custom square element removed from page.'); } adoptedCallback() { console.log('Custom square element moved to new page.'); }

The attributeChangedCallback() callback is run whenever one of the element's attributes is changed in some way. As you can see from its properties, it is possible to act on attributes individually, looking at their name, and old and new attribute values. In this case however, we are just running the updateStyle() function again to make sure that the square's style is updated as per the new values:

attributeChangedCallback(name, oldValue, newValue) { console.log('Custom square element attributes changed.'); updateStyle(this); }

Note that to get the attributeChangedCallback() callback to fire when an attribute changes, you have to observe the attributes. This is done by specifying a static get observedAttributes() method inside custom element class - this should return an array containing the names of the attributes you want to observe:

static get observedAttributes() { return ['c', 'l']; }

This is placed right at the top of the constructor, in our example.

Note: Find the full JavaScript source here.

【本文地址】

公司简介

联系我们